<template>
  <vue-table
    :dataList="dataList"
    :totalCount="totalCount"
    v-bind="contentTableConfig"
    v-model:pageInfo="pageInfo"
  >
    <template #headerHandler>
      <el-button v-if="isCreate" @click="handleNewData">新增用户</el-button>
      <el-button v-if="isQuery">刷新</el-button>
    </template>
    <template #status="scope">
      <el-switch
        v-model="scope.row.status"
        :active-value="1"
        :inactive-value="0"
      />
    </template>
    <template #create="scope">
      <span>{{ $filters.formatTime(scope.row.create) }}</span>
    </template>
    <template #update="scope">
      <span>{{ $filters.formatTime(scope.row.update) }}</span>
    </template>
    <template #handler="scope">
      <div class="btns">
        <el-button
          type="primary"
          size="mini"
          v-if="isUpdate"
          @click="handleEditorRow(scope.row)"
          >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          v-if="isDelete"
          @click="handleDeleteRow(scope.row)"
          >删除</el-button
        >
      </div>
    </template>
    <!-- <template #imgUrl="scope">
      <el-image
        style="width: 60px; height: 60px"
        :src="scope.row.imgUrl"
        :preview-src-list="[scope.row.imgUrl]"
        :initial-index="1"
      >
      </el-image>
    </template> -->

    <!-- 动态注册 其他组件 -->
    <template
      v-for="item in otherPropSlots"
      :key="item.prop"
      #[item.slotName]="scope"
    >
      <template v-if="item.slotName">
        <slot :name="item.slotName" :row="scope.row"></slot>
      </template>
    </template>
  </vue-table>
</template>

<script lang="ts">
import { defineComponent, computed, PropType, watch, ref } from "vue";
import { useStore } from "@/store";
import { usePermission } from "@/hooks/usePermission";
import VueTable from "@/base-ui/table";
import LocalCache from "@/utils/cache";
import { mapGetters } from "vuex";
export default defineComponent({
  props: {
    contentTableConfig: {
      type: Object,
      require: true,
    },
    pageName: {
      type: String,
      required: true,
    },
  },
  components: {
    VueTable,
  },
  emits: ["handleEditorRow", "newBtnClick"],
  setup(props, { emit }) {
    const store = useStore();
    //  0， 权限控制
    const isCreate = usePermission("users", "create");
    const isUpdate = usePermission("users", "update");
    const isDelete = usePermission("users", "delete");
    const isQuery = usePermission("users", "query");

    // 分页设置
    const pageInfo = ref({
      pageSize: 20,
      currentPage: 1,
    });
    watch(pageInfo, () => getPageData());
    // 1 数据请求
    const getPageData = (searchInfo: any = {}) => {
      if (!isQuery) return;
      store.dispatch("systemModule/getPageListActions", {
        pageName: props.pageName,
        queryInfo: {
          offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...searchInfo,
        },
      });
    };

    getPageData();
    // 2,根据类型获取数据
    const dataList = computed(() => {
      return store.getters["systemModule/getPageListData"](props.pageName);
    });
    // 3,获取总页数
    const totalCount = computed(() => {
      return store.getters["systemModule/pageListDataCount"](props.pageName);
    });

    // const dataList = computed(() => {
    //   console.log(store.state.systemModule);
    //   return (
    //     store.state.systemModule.usersList ?? LocalCache.getCache("usersList")
    //   );
    // });
    // 获取总页数
    // const totalCount = computed(() => {
    //   return (
    //     store.state.systemModule.usersTotalCount ??
    //     LocalCache.getCache("usersTotalCount")
    //   );
    // });
    // console.log(totalCount.value, "获取总页数");

    // 4, 动态注册剩余的 slot
    const otherPropSlots = computed(() => {
      return props.contentTableConfig?.propsList.filter((item: any) => {
        if (item.slotName === "status") return false;
        if (item.slotName === "create") return false;
        if (item.slotName === "update") return false;
        if (item.slotName === "handler") return false;
        return true;
      });
    });
    // console.log(otherPropSlots.value);

    // 5,删除
    const handleDeleteRow = (row: any) => {
      store.dispatch("systemModule/deletePageDateByIdActions", {
        pageName: props.pageName,
        id: row.id,
      });
    };
    const handleNewData = () => {
      emit("newBtnClick");
    };
    // 编辑
    const handleEditorRow = (row: any) => {
      emit("handleEditorRow", row);
    };
    return {
      getPageData,
      dataList,
      totalCount,
      pageInfo,
      otherPropSlots,
      isCreate,
      isUpdate,
      isDelete,
      isQuery,
      handleDeleteRow,
      handleEditorRow,
      handleNewData,
    };
  },
});
</script>
